import biaoge from "../../../Zhpg/Yxfx/YxfxXq/biaoge";
import { Descriptions, Button } from "antd";
import DarkCard from "../../../../../../common/DarkCard";
import { CloseOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import CztApi from "../../../../../../../utils/apis/CztApi";
import JzzyApi from "../../../../../../../utils/apis/JzzyApi";
import Api from "../../../../../../../utils/api";

export default function DzenXqDetail(props) {
    const btzd = biaoge();
    const [data2, setData2] = useState()
    let { xlName, datas1 } = props;
    const data = JSON.parse(xlName?.xq)
    console.log('data2', data2)
    //暂时
    useEffect(() => {
        // console.log('xlName',xlName)
        CztApi.listId(xlName.id).then(resp => {
            console.log('czt', resp)
            if (resp.rows) {
                console.log('czt2', resp)

            }
        })
        JzzyApi.listId(xlName.id).then(resp => {
            console.log('jzzy', resp)
            if (resp.data) {
                console.log('jzzy2', resp)
            }
        })
        // return()=>{
        //     datas1=null;xlName=null;
        // }
    }, [xlName, datas1])
    useEffect(() => {

        Api.getConfig().then(resp => {
            if (datas1) {
                setData2(resp?.detailTemplate?.[`${datas1}`])
            }

            //console.log('data',resp?.detailTemplate?.[`${cztxl}`])
        })
    }, [datas1])
    return <>
        {datas1 && <DarkCard style={{
            position: 'absolute',
            right: '10px',
            width: '300px',
            top: '20px',
            bottom: '20px',
            pointerEvents: 'auto',
            borderRadius: 8,
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                borderBottom: "1px solid #eee",
                paddingBottom: 12,
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>{xlName?.title}</div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000"
                    }} onClick={e => {
                        props?.onClose?.()
                    }} />
                </div>

            </div>
            <Descriptions column={1} bordered size="large" className="fill h0" style={{
                overflow: 'auto'
            }}>



                {

                    data2?.map((e) => {
                        if (datas1 === "有名饭店") {
                            datas1 = "星级酒店";
                        }

                        return (
                            <Descriptions.Item label={e.alias}>{data?.[e.name]}</Descriptions.Item>
                        )
                    })
                }

            </Descriptions>
        </DarkCard>}
    </>
}